<!-- eslint-disable vue/no-template-shadow -->
<template>
  <div>
    <BasicTable @register="registerTable">
      <template #expandedRowRender="{ record }">
        <BasicTable
          @register="registerChildrenTable"
          :data-source="record.bDlist"
          style="max-width: 65%"
        >
          <template #action="{ record }">
            <TableAction
              :actions="[
                {
                  label: '发起流程',
                  popConfirm: {
                    title: '是否要发起流程？',
                    placement: 'top',
                    confirm: handleProcess.bind(null, record),
                  },
                  // auth: 'super', // 根据权限控制是否显示: 有权限，会显示
                },
                {
                  label: '查看',
                  onClick: handleView.bind(null, record),
                  // auth: 'super', // 根据权限控制是否显示: 有权限，会显示
                },
                {
                  label: '删除',
                  popConfirm: {
                    title: '是否要删除数据？',
                    placement: 'top',
                    confirm: handleDelete.bind(null, record),
                  },
                  // auth: 'super', // 根据权限控制是否显示: 有权限，会显示
                },
              ]"
            />
          </template>
        </BasicTable>
      </template>
    </BasicTable>
    <initiateFlow @register="registerModal" ref="AddWorkFlowForm" />
  </div>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { useModal } from '/@/components/Modal';
  import { getMyWorkFlowColumns, getChildMyWorkFlowColumns } from './flowData';
  import { getStartFlowApi } from '/@/api/demo/flow';

  import initiateFlow from './initiateFlow.vue';

  const AddWorkFlowForm = ref<any>(null);

  // 父级表格
  const [registerTable] = useTable({
    columns: getMyWorkFlowColumns(),
    fetchSetting: {
      // 当前页传递给后台的字段名称
      pageField: 'CurrentPage',
      // 后台每页显示的数量字段名称
      sizeField: 'PageSizes',
      // 接口返回的表单数据字段名称
      listField: 'items',
      // 接口返回的表格总数字段名称
      totalField: 'totalCount',
    },
    showTableSetting: true, // 显示表格设置工具
    showIndexColumn: false,
    tableSetting: { fullScreen: true }, // 表格设置工具配置
    bordered: true,
  });

  // 子级表格
  const [registerChildrenTable, { getDataSource }] = useTable({
    // 分页配置
    columns: getChildMyWorkFlowColumns(),
    showIndexColumn: false,
    showTableSetting: false, // 表格设置工具配置
    bordered: true,
    pagination: false,
    scroll: { x: 0, y: 0 },
    canResize: false,
    actionColumn: {
      width: 400,
      fixed: 'right',
      title: '操作',
      dataIndex: 'action',
      slots: { customRender: 'action' },
    },
  });

  // 发起流程弹窗
  const [registerModal] = useModal();

  // 操作
  const handleProcess = (record: Recordable) => () => {
    getStartFlowApi(record.id).then((res) => {
      if (res.id !== null) {
        let obj = getDataSource().find((item) => item.id === record.id);
        if (obj !== null) {
          AddWorkFlowForm.value.lcShow(res, 'jr', '', '', obj.id, obj.name, '');
        } else {
          AddWorkFlowForm.value.lcShow(res, 'jr', '', '', record.id, '', '');
        }
      }
    });
  };
  const handleView = (record: Recordable) => () => {
    console.log(record);
  };
  const handleDelete = (record: Recordable) => () => {
    console.log(record);
  };
</script>
